import { Component, Input, OnInit, TemplateRef } from '@angular/core';
import { UploadFile } from '@shared/apes/upload';

@Component({
  selector: 'apes-images',
  template: `
    <div class="apes-images">
      <ng-container *ngFor="let file of fileList,let i =index">
        <div apes-popover [apesPopoverContent]="imagesTemplate">
          <div class="apes-images-file">
            <img class="apes-images-img" [src]="file.url"/>
          </div>
        </div>
        <ng-template #imagesTemplate>
          <!--<apes-upload apesListType="picture-card"-->
                       <!--[apesFileList]="list(file)"-->
                       <!--[apesShowButton]="false"-->
                       <!--[apesRemove]="handleRemove"-->
                       <!--[apesShowUploadList]="handleShowList()"-->
          <!--&gt;</apes-upload>-->
          <a class="apes-images-pop-img" [href]="file.url" target="_blank" rel="noopener noreferrer">
            <img class="apes-images-img" [src]="file.url"/>
          </a>
        </ng-template>
      </ng-container>
    </div>
  `,
  host: {},
})

export class ApesImagesComponent implements OnInit {

  public _fileList: UploadFile[] = [];
  public _title: String;
  public _height;

  @Input()
  set apesList(value) {
    // console.log(value);
    let list;
    if(typeof value === 'string'){
      list = JSON.parse(value);
    }else {
      list = value;
    }
    this._fileList = list ? list : [];
  }

  get apesList() {
    return this._fileList;
  }

  // get list() {
  //   return value || [];
  // }
  //
  // set list(value){
  //   return value;
  // }

  constructor() {
  }

  ngOnInit(): void {
    // console.log(this._fileList);
    this._fileList.forEach((file) => {
      if (!file.url && file.id) {
        file.url = 'fileserver/view/' + file.id;
      }
    });
  }

  get fileList(): UploadFile[] {
    return this._fileList || [];
  }

  set fileList(input: UploadFile[]) {
    let value = input;
    if (this._fileList === value) {
      return;
    }
    this._fileList = value;
  }

  handleRemove = (file: UploadFile) => {
    return false;
  };

  handleShowList = () => {
    let showList = {
      showPreviewIcon: true,
      showRemoveIcon: false,
      showDownloadIcon: true,
    };
    return showList;
  };

}
